<template>
    <tool-header>
        {{ title }}
    </tool-header>
    <a-row justify="center">
        <a-col :flex="1">
            <div style="margin:20px">
                <a-form :label-col="labelCol">
                    <a-form-item label="Length" name="length">
                        <a-input v-model:value="modelRef.length" type="number" placeholder="" />
                    </a-form-item>
                    <a-form-item label="Numbers" name="numbers">
                        <a-tooltip>
                            <template #title>Include numbers in the password</template>
                            <InfoCircleOutlined :style="{fontSize: '18px'}" />
                        </a-tooltip>
                        <a-switch v-model:checked="modelRef.supperNumbers" />
                    </a-form-item>
                    <a-form-item label="Symbols" name="symbols">
                        <a-tooltip>
                            <template #title>Include !@#$%^&*()_+-=[]{}|;:,.&lt;&gt;? in the password</template>
                            <InfoCircleOutlined :style="{fontSize: '18px'}" />
                        </a-tooltip>
                        <a-switch v-model:checked="modelRef.supperSymbols" />
                    </a-form-item>
                    <a-form-item label="Uppercase" name="Uppercase">
                        <a-switch v-model:checked="modelRef.supperUppercase" />
                    </a-form-item>
                    <a-form-item label="Lowercase" name="Lowercase">
                        <a-switch v-model:checked="modelRef.supperLowercase" />
                    </a-form-item>
                    <a-form-item label="Exclude Similar Characters" name="excludeSimilarCharacters">
                        <a-tooltip>
                            <template #title>Exclude similar characters like 'l', 'I', '1', etc.</template>
                            <InfoCircleOutlined :style="{fontSize: '18px'}" />
                        </a-tooltip>
                        <a-switch v-model:checked="modelRef.excludeSimilarCharacters" />
                    </a-form-item>
                    <a-form-item label="Exclude" name="exclude">
                        <a-input v-model:value="modelRef.exclude"></a-input>
                    </a-form-item>
                    <a-form-item :wrapper-col="{ offset: 8 }">
                        <a-button type="primary" @click="genPwd">Generate Password</a-button>
                    </a-form-item>
                    <a-form-item label="Password" name="Password">
                        <a-input v-model:value="pwd"></a-input>
                    </a-form-item>
                </a-form>
            </div>
        </a-col>
    </a-row>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router'
import ToolHeader from '../ToolHeader.vue'
import PasswordGenerator from '@/utils/PasswordGenerator';
import {
    InfoCircleOutlined
} from '@ant-design/icons-vue';
const route = useRoute();
const title = route.query.title
const labelCol = { span: 6 };
interface PwdCfg {
    length: number,
    supperNumbers: boolean,
    supperSymbols: boolean,
    supperUppercase: boolean,
    supperLowercase: boolean,
    excludeSimilarCharacters: boolean,
    exclude: string
}
const modelRef = reactive<PwdCfg>({
    length: 20,
    supperNumbers: true,
    supperSymbols: true,
    supperUppercase: true,
    supperLowercase: true,
    excludeSimilarCharacters: false,
    exclude: ''
});

let pwd = ref<string>('')

const genPwd = () => {
    const options = {
        length: modelRef.length, // Length of the password (default: 12)
        useNumbers: modelRef.supperNumbers, // Include numbers in the password (default: false)
        useSymbols: modelRef.supperSymbols, // Include symbols in the password (default: false)
        useLowercase: modelRef.supperLowercase, // Include lowercase letters in the password (default: false)
        useUppercase: modelRef.supperUppercase, // Include uppercase letters in the password (default: false)
        excludeSimilarChars: modelRef.excludeSimilarCharacters, // Exclude similar characters like 'l', 'I', '1', etc. (default: false)
        excludeChars: modelRef.exclude, // Exclude specific characters from the password (default: "")
        requireOneCharFromEachPool: false, // Require at least one character from each enabled character pool (default: false)
    };

    const generator = new PasswordGenerator(options);

    const password = generator.generate();
    pwd.value = password;
    console.log(password); // Example output: "A7#gR5x9P2"
}
</script>